<template>
  <div>
    <el-table
      :default-sort="{
        prop: 'date',
        order: 'descending',
      }"
      :data="tableData"
      style="width: 97%"
      border='1'
    >
      <el-table-column fixed prop="id" label="ID" width="50px" />
      <el-table-column prop="train" label="车次" />
      <el-table-column prop="type" label="车次类型"  width='130px' />
      <el-table-column prop="name" label="车长" />
      <el-table-column prop="con" label="车厢总数" width='90px' />
      <el-table-column prop="seat" label="总座位数"  width='90px' />
      <el-table-column prop="limited" label="限乘人数" width='90px' />
      <el-table-column  label="状态" width='110px' >
        <template #default="scope">
          <el-switch
            :model-value="scope.row.state === '启用' ? true : false"
            class="ml-2"
            inline-prompt
            active-icon="Watermelon"
            inactive-icon="Sugar"
            @change="
              (e) => {
                SetState(e, scope.row.id);
              }
            "
            :style="{
              marginLeft: '24px',
              '--el-switch-on-color': ' #13ce66',
              '--el-switch-off-color': '#F56C6C',
            }"
          />
        </template>
      </el-table-column>

      <el-table-column prop="date" label="发出时间" width="150px" sortable />
      <el-table-column fixed="right" label="操作" width="150px">
        <template #default="scope">
          <el-popconfirm
            width="200"
            @confirm="() => del(scope.row.id)"
            :title="'确定删除车次' + scope.row.train + '?'"
          >
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>

          <el-button size="small" type="success" @click="() => Edit(scope.row)"
            >编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <edit-dialog
      ref="child"
      @getlist="getlist"
      :form="form"
      @EditSub="EditSub"
    />
  </div>
</template>

<script>
import { EditTrain, HttpState, HttpDel } from "api";
import { ElMessage } from "element-plus";
import EditDialog from "../../../components/EditDialog.vue";

export default {
  components: { EditDialog },
  data() {
    return {
      options: [
        "高速动车",
        "动车组",
        "城际高速",
        "直达特快",
        "空调特快",
        "快速",
        "普快",
      ],
      options1: ["停用", "启用"],
      form: {
        city: "",
        type: "",
        train: "",
        state: "",
        name: "",
        seat: 1,
        con: 3,
        line: "",
        line1: "",
        limited: 600,
      },
      show: false,
      tableData: [],
    };
  },
  props: {
    type1: Boolean,
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  methods: {
    async del(id) {
      const res = await HttpDel({ id });
      ElMessage({
        message: res.data.msg,
      });
      this.$emit("getlist");
    },
    async SetState(e, id) {
      const res = await HttpState({ e: e, id });
      ElMessage({
        type: "warning",
        message: res.data.msg,
      });
      this.$emit("getlist");
    },
    Edit(row) {
      // 父组件 修改 子组件
      this.$refs.child.show = true;
      this.form = { ...row };
    },
    getshow(e) {
      console.log(e);
    },

    async EditSub() {
      console.log(this.form);
      const res = await EditTrain({ ...this.form });
      ElMessage({
        type: res.data.code === 200 ? "success" : "warning",
        message: res.data.msg,
      });
      this.$emit("getlist");
      this.show = false;
    },
    onCreated(editor) {
      this.editor = Object.seal(editor);
    },
    getlist() {
      this.$emit("getlist");
    },
  },
};
</script>
 <style scoped lang='scss'  >
.form {
  a {
    float: left;
    width: 50px;
  }
  .el-input {
    float: right;
    width: 100%;
    height: 40px;
  }
}
</style>